<template>
	<view>
		<view class="box">
			<image class="bg-image" src="/static/background.png" mode="aspectFill"></image>
			<view class="content">
				<p class="title">{{ title }}</p>
				<text>{{ content }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: null,
			content: null
		};
	},
	onLoad(data) {
		this.title = data.title;
		this.content = data.content;
	}
}
</script>

<style lang="scss">
.box {
	height: 92.5vh;
	width: 100%;
	position: relative;
	overflow: hidden;

	.bg-image {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.content {
		position: relative;
		z-index: 2;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.75);

		.title {
			width: 100%;
			font-weight: bold;
			text-align: center;
			font-size: 24px;
			padding: 16px 0;
			color: #333;
		}

		.text-content {
			display: block;
			margin: 0 3%;
			color: #333;
			font-size: 28rpx;
			line-height: 1.6;
			white-space: pre-wrap;
		}
	}
}
</style>